<template>
  <div class="profile">
    <Async_goback_icon @goback="goback" />
    <!-- 头部 -->
    <div class="top">
      <img src="../assets/281578538336_.pic_hd.e816ad71.jpg" alt="">
    </div>
    <div class="main">
      <!-- 头像 -->
      <div class="img">
        <img :src="'http://43.138.15.137:3000' + UserInfo.userAvatar" alt="">
        <!-- 关注组件 -->
        <Async_care_icon @care="care" :status="UserInfo.myRelation" />
      </div>
      <div style="height: 35px; width: 100%;background-color: #000;"></div>
      <div class="decs">
        <p>{{ UserInfo.userNickname }}</p>
        <p class="doyin">抖音号：{{ UserInfo.id }}</p>
        <p class="doyin" style="color: #8b8c96;margin-top: 8px;margin-left: -5px;">{{ UserInfo.userDesc }}</p>
        <!-- 性别和年龄 -->
        <Async_label_icon :label="UserInfo.userGender" :age="UserInfo.userAge" />
        <!-- 数量 -->
        <div class="shu">
          <div class="num">{{ beLikesNum }}获赞</div>
          <div class="num">{{ CareNum }}关注</div>
          <div class="num">{{ FansNum }}粉丝</div>
        </div>
      </div>

      <div class="box">
        <!-- 标签切换 -->
        <div class="title">
          <div class="title1" @click="works" :class="title === 0 ? 'color' : ''">
            <div class="hover" v-if="title === 0"></div>作品&nbsp;{{ VideoNum }}
          </div>
          <div class="title1" @click="trends" :class="title === 1 ? 'color' : ''">
            <div class="hover" v-if="title === 1"></div>动态&nbsp;{{ VideoNum }}
          </div>
          <div class="title1" @click="Likes" :class="title === 2 ? 'color' : ''">
            <div class="hover" v-if="title === 2"></div>喜欢&nbsp;{{ LikesNum }}
          </div>
        </div>
        <div style="height: 23px; width: 100%;background-color: #000;"></div>
        <!-- 作品视频 -->
        <div class="video-box" v-if="title === 0">
          <Async_video_part :Arr="videosArr[0]" />
        </div>
        <!-- 动态 -->
        <div class="video-box" v-if="title === 1">
          <Async_trends_part />
        </div>
        <!-- 喜欢视频 -->
        <div class="video-box" v-if="title === 2">
          <Async_video_part :Arr="videos1Arr[0]" />
        </div>
      </div>
    </div>
    <Async_message_part :flag="flag" :title="title1" />
  </div>
</template>

<script setup>
import { defineAsyncComponent, ref } from 'vue'
// 视频组件
const Async_video_part = defineAsyncComponent(() => import('../components/common/video-part.vue'))
// 动态组件
const Async_trends_part = defineAsyncComponent(() => import('../components/common/trends-part.vue'))
// 关注组件
const Async_care_icon = defineAsyncComponent(() => import('../components/common/icon/care-icon.vue'))
// 返回组件
const Async_goback_icon = defineAsyncComponent(() => import('../components/common/icon/goback-icon.vue'))
// 消息提示
const Async_message_part = defineAsyncComponent(() => import('../components/common/message-part.vue'))
// 性别年龄组件
const Async_label_icon = defineAsyncComponent(() => import('../components/common/icon/label-icon.vue'))

import { getProfileUserInfoAPI, getProfileVideoAPI, getProfileVideo1API, getProfileVideoNumAPI, getProfileLikesNumAPI, getProfileCareAPI, getProfileCareNumAPI, getProfileFansNumAPI, getProfilebeLikesNumAPI } from '../api/Profile-page'

import { useRoute } from 'vue-router'

const route = useRoute()
// 我的id
const myId = JSON.parse(localStorage.getItem('data')).userId
// 当前用户的作品视频
const videosArr = ref([])
// 当前用户的喜欢视频
const videos1Arr = ref([])
// 当前用户信息
const UserInfo = ref({})
// 当前用户id
const userId = (route.query.id).slice('')
// 当前用户的作品视频数量
const VideoNum = ref(0)
// 当前用户的作品视频数量
const LikesNum = ref(0)
// 当前用户的关注数量
const CareNum = ref(0)
// 当前用户的粉丝数量
const FansNum = ref(0)
// 当前用户的获赞数量
const beLikesNum = ref(0)
// 标题
const title = ref(0)
const flag = ref(false)
const title1 = ref('')

initProfile()
async function initProfile() {
  // 我的id
  console.log(myId, 'myId');
  // 当前用户的id
  console.log(userId, 'userId');
  // 当前用户个人信息
  let userInfo = await getProfileUserInfoAPI(userId, myId)
  // 当前用户的作品数量
  let UserNum = await getProfileVideoNumAPI(userId)
  // 当前用户的喜欢数量
  let LikesRes = await getProfileLikesNumAPI(userId)
  // 当前用户的关注数量
  let CareRes = await getProfileCareNumAPI(userId)
  // 当前用户的粉丝数量
  let FansRes = await getProfileFansNumAPI(userId)
  // 当前用户的获赞数量
  let beLikesRes = await getProfilebeLikesNumAPI(userId)

  works()
  LikesNum.value = LikesRes.data.data
  beLikesNum.value = beLikesRes.data.data
  FansNum.value = FansRes.data.data
  CareNum.value = CareRes.data.data
  VideoNum.value = UserNum.data.data
  console.log(FansNum.value, '当前用户的粉丝数量');
  console.log(beLikesNum.value, '当前用户的获赞数量');
  console.log(VideoNum.value, '当前用户的作品视频数量');
  console.log(CareNum.value, '当前用户的关注数量');
  console.log(LikesNum.value, '当前用户的喜欢视频数量');
  UserInfo.value = userInfo.data.data
  console.log(UserInfo.value, '当前用户信息');
}
// 作品视频
async function works() {
  title.value = 0
  // 当前用户作品视频信息
  let res = await getProfileVideoAPI(userId)
  videosArr.value.push(res.data.data)
  console.log(videosArr.value, '当前用户的作品视频');
}
// 喜欢视频
async function Likes() {
  title.value = 2
  // 当前用户的动态视频
  let result = await getProfileVideo1API(userId)
  videos1Arr.value.push(result.data.data)
  console.log(videos1Arr.value, '当前用户的动态视频');
}
// 动态视频
async function trends() {
  title.value = 1
}
// 返回上一页按钮
async function goback() {
  window.history.go(-1)
}
// 关注按钮
async function care() {
  let res = await getProfileCareAPI(myId, userId)
  console.log(res.data.data);
  Timeout(res.data.data)
}
// Message组件简便方法
function Timeout(t) {
  flag.value = true
  title1.value = t + '~'
  setTimeout(() => {
    flag.value = false
    title1.value = ''
  }, 1000)
}

</script>

<style lang="scss" scoped>
.profile {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;

  &::-webkit-scrollbar {
    display: none;
  }
}

.top {
  position: fixed;
  top: 0;
  left: 0;
  // z-index: 10;

  img {
    // width: 100%;
    height: 150px;
  }
}

.shu {
  width: 100%;
  display: flex;
  font-size: 14px;
  margin-left: -8px;
  margin-top: 10px;

  .num {
    margin-right: 25px;
  }
}

.main {
  position: relative;
  top: 0;
  left: 0;
  margin-top: 150px;
  height: auto;
  width: 100%;
  background-color: #000;
  z-index: 10;

  &::-webkit-scrollbar {
    display: none;
  }

  .img {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 10px;
    margin-top: -20px;
    width: 90px;
    height: 90px;
    background-color: #000;
    border-radius: 50%;
    z-index: 11;

    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-top: 5px;
      margin-left: 5px;
    }
  }
}

.decs {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  margin-top: 70px;
  color: #fff;
  font-size: 18px;
  margin-left: 20px;

  .doyin {
    font-size: 12px;
  }
}

.box {
  position: relative;
  width: 100%;
  padding-top: 200px;

  .title {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 170px;
    // z-index: 10;
    display: flex;
    background-color: #000;
    width: 100%;
    height: 28px;
    padding: 12px 0px 12px 0px;
    justify-content: space-around;
    align-items: center;

    .title1 {
      position: relative;
      color: #8b8c96;
      ;
      width: 100%;
      text-align: center;
      height: 28px;
      padding: 12px 0px 6px 0px;
      font-size: 16px;

      .hover {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #face15;
      }
    }
  }
}

.color {
  color: #fff !important;
}

.video-box {
  align-items: center;
  justify-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 160px;
}
</style>